<template>
    <div class="footer">
      <div class="footer-wapper">
        <div class="footContent">
          <!-- 左边 -->
          <div class="footText">
            <router-link to='/'>首页</router-link>
            <a href="http://www.goktech.cn/about/about_goktech" target="_blank">关于我们</a>
            <a href="http://www.goktech.cn/college/intro" target="_blank">了解国科学院</a>
            <a href="http://www.goktech.cn/" target="_blank">国科科技</a>
            <a href="javascript:;" @click="queryCanFeedBack">意见反馈</a>
          </div>
          <!-- 右边 -->
          <div class="vipcn-wrapper">
            <div class="wechat">
              <div class="text">
                <i class="icon-WeChat"></i>
                <span style="font-size:16px">官方公众号</span>
              </div>
              <div class="pic-wrapper">
                <img src="../../images/WechatQrcode.jpeg" alt="微信公众号">
              </div>
            </div>
            <div class="weibo">
              <a target="_blank" href="https://weibo.com/u/5377603165" title="weibo" class="text">
                  <i class="icon-WeiBo"></i>
                  <span>官方微博</span>
              </a>
            </div>
          </div>
        </div>
        <!-- 备案 -->
        <p class="recordsText">
          <a href="http://www.miit.gov.cn/" target="_blank">&copy;2018 campus.goktech.cn  闽ICP备15016628号-1</a>
        </p>
      </div>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { canFeedBack } from 'api/getData';
export default {
  name: "foot",
  computed: {
    ...mapGetters(['currentUser', 'isLogin'])
  },
  methods: {
    ...mapActions(['setSideShowFn', 'setDialogClose']),
    queryCanFeedBack() {
      // this.setSideShowFn(true)
      if (this.isLogin) {
        canFeedBack(this.currentUser.type, this.currentUser.cluesOrStuId.toString()).then(res => {
          if (res.data.msg) {
            this.setSideShowFn(true)
          } else {
            this.$alert('当天最多填写10次意见反馈', '', {
              confirmButtonText: '确定',
              showClose: true,
              callback: action => {
              }
            });
          }
        })
      } else {
        this.$alert('登录后才可以填写意见反馈哦!', '提示', {
          confirmButtonText: '立即登录',
          showClose: true,
          callback: action => {
            if (action == 'confirm') {
              setTimeout(() => {
                this.setDialogClose(true)
              }, 400);
            }
          }
        });
      }

    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base';

.footer {
  width: 100%;
  margin-top: 0;
  background-color: $color-foot-bg;
  color: $color-foot-text;

  .footer-wapper {
    position: relative;
    width: 1200px;
    height: 227px;
    margin: auto;

    .footContent {
      @extend .clear-fix;

      .footText {
        float: left;
        margin-top: 67px;
        font-size: $font-size-medium-x;

        a {
          text-decoration: none;
          color: $color-foot-text;

          &:hover {
            color: $color-theme;
          }
        }

        a + a {
          margin-left: 26px;
        }
      }

      .vipcn-wrapper {
        float: right;
        position: relative;
        height: 200px;

        > div {
          position: absolute;
          top: 50%;
          right: 160px;
          width: 120px;
          height: 30px;
          padding-top: 30px;
          margin-top: -65px;
          color: $color-foot-text;
          vertical-align: middle;
          cursor: pointer;

          i {
            &:before {
              margin-right: 8px;
              font-size: 30px;
              vertical-align: middle;
            }
          }

          .pic-wrapper {
            display: none;
            position: absolute;
            top: -135px;
            left: -12px;
            width: 148px;
            height: 148px;
            line-height: 148px;
            text-align: center;
            border-radius: 12px;
            background-color: #fff;
            -webkit-box-shadow: 0 0px 12px rgba(0, 0, 0, 0.14);
            -ms-box-shadow: 0 0px 12px rgba(0, 0, 0, 0.14);
            -moz-box-shadow: 0 0px 12px rgba(0, 0, 0, 0.14);
            -o-box-shadow: 0 0px 12px rgba(0, 0, 0, 0.14);
            box-shadow: 0 0px 12px rgba(0, 0, 0, 0.14);

            // &:after {
            // position: absolute;
            // content: '';
            // display: block;
            // left: 50%;
            // bottom: -6px;
            // margin-left: -10px;
            // border-width: 16px;
            // border-style: solid;
            // border-bottom-width: 0;
            // border-left-width: 0;
            // border-color: $color-background-foot transparent transparent transparent;
            // -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
            // -ms-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
            // -o-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
            // -moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
            // box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.12);
            // -webkit-transform: rotate(225deg);
            // -ms-transform: rotate(225deg);
            // -o-transform: rotate(225deg);
            // -moz-transform: rotate(225deg);
            // transform: rotate(225deg);
            // z-index: 20;
            // }
            img {
              width: 130px;
              height: 130px;
              margin-top: 8px;
              background: #fff;
            }
          }
        }

        .wechat:hover {
          .pic-wrapper {
            display: block;
          }

          color: $color-theme;
        }

        .icon-WeChat, .icon-WeiBo {
          position: relative;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 12px;
          margin-bottom: -6px;
          background-color: #fff;
          border-radius: 50%;

          &:before {
            position: absolute;
            top: -5px;
            left: -5px;
            border-radius: 50%;
          }
        }

        .weibo {
          text-align: right;
          right: 0;
          margin-left: 63px;

          &:hover .text {
            color: $color-theme;
          }

          .text {
            text-decoration: none;
            color: $color-foot-text;
          }
        }
      }
    }

    // 备案
    .recordsText {
      @extend .clear-default;
      position: absolute;
      bottom: 60px;
      height: $font-size-medium;
      font-size: $font-size-medium;
      line-height: $font-size-medium;
    }
    .recordsText a{
      color: $color-foot-text;
    }
  }
}
</style>
